<template>
    <el-row class="add-student-detail">
        <line-head-form class="head" :title="form.id!=='add'?'修改学生':'新增学生'" :type="form.id!=='add'?'edit':'add'" />
        <el-form class="c-form" label-position="right" label-width="120px" ref="form" :rules="rules" :model="form">
            <el-form-item label="姓名:" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="电话:" prop="phoneNo">
                <el-input v-model="form.phoneNo" placeholder="请输入电话"></el-input>
            </el-form-item>
            <el-form-item label="年级:">
                <el-select v-model="form.baseSectionId" placeholder="请选择年级" >
                    <el-option v-for="item in condition.gradeObj.list" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="性别:" >
                <el-radio :label="1" v-model="form.sex">男</el-radio>
                <el-radio :label="2" v-model="form.sex">女</el-radio>
            </el-form-item>
            </div>
            <div class="class-btn">
                <el-button :disabled="addDisabled" type="primary" class="height-btn" @click="sure">确定</el-button>
                <el-button class="light-btn" @click="$router.go(-1)">取消</el-button>
            </div>
        </el-form>
    </el-row>
</template>
<script>
import LineHeadForm from '../../common/LineHeadForm'
import { mapState, mapActions } from 'vuex'
import util from 'lib/util'
import io from 'lib/io'
export default {
    components: {
        LineHeadForm,
    },
    data() {
        return {
            addDisabled: false,
            courseInfo: [],
            form: {
                id: this.$route.params.id,
                name:'',
                phoneNo:'',
                baseSectionId:'',
                sex:'',
                status:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入姓名', trigger: 'blur' }
                ],
                phoneNo: this.filterRules({required:true,type:'mobile'})
            }
        }
    },
    computed: {
        ...mapState(['condition', 'classes'])
    },
    created() {
        if (this.form.id !== 'add') {
            this.studentDetail()
        }
        this.findBaseSectionPage({ pageIndex: 1, pageSize: 10000000})
    },
    methods: {
        ...mapActions(['findBaseSectionPage', 'classDetail', ]),
        async studentDetail(){
            let {data}=await io.post6(io.detailStudent,{id:this.form.id})
            if(data.success){
                this.form=data.data
            }
        },
        sure() {
            this.addDisabled = true
            setTimeout(() => {
                this.addDisabled = false
            }, 2000)
            this.$refs.form.validate(async (vali) => {
                if (vali) {
                    let opt = { ...this.form}
                    let url
                    if (this.form.id === 'add') {
                        opt = { ...opt, id: '' }
                        url=io.addStudent
                    }else{
                        url=io.updateStudent
                    }
                    let { data } = await io.post6(url, opt)
                    if (data.success) {
                        this.$message({ type: "success", message: '保存成功！' })
                        this.$router.go(-1)
                    }
                } else {
                    this.$message('还有必填项未填，请先填写')
                    return
                }
            })
        }
    }
}
</script>
<style lang="stylus" scoped>
.add-student-detail
    .c-form
        padding 0 200px
        margin auto
        margin-top 50px
        .el-select
            width 100%
            height 34px
        .el-input
            height 34px
        .week
            .el-checkbox-group
                display inline-block
                padding-left 33px
            .el-checkbox+.el-checkbox
                margin-left 35px
        .week-time
            height auto 
            padding-left 120px
            .week-time-box
                width 80%
                min-width 620px
                .every-time
                    height 80px
                    width 100%
                    border 1px solid #bfebf3
                    padding 23px 22px
                    box-sizing border-box
                    .el-select
                        width 25%
                        margin-right 20px

    .head
        margin-top 10px
    .free-num
        margin-left 10px
        font-style normal
    .personal
        border 0
        color #606266
        &:hover
            background transparent
    .class-btn
        text-align center
        padding-top 42px
        padding-bottom 49px
</style>


